<template>
  <div class="head">
    <div class="head_img">
      <img v-if="userInfo.headUrl" :src="userInfo.headUrl" alt="" />

      <img src="@images/user-icon-G.png" alt="" v-else-if="userInfo.gender == '女'" />
      <img src="@images/user-icon.png" alt="" v-else />
    </div>
    <div class="info">
      <div class="name">{{ userInfo.userName || '' }}</div>
      <div class="info_con">
        <div class="info_li">
          <div class="info_li_label">出生年月：</div>
          <div class="info_li_val">{{ userInfo.birthday || emptyText }}</div>
        </div>
        <div class="info_li">
          <div class="info_li_label">性别：</div>
          <div class="info_li_val">{{ userInfo.gender || emptyText }}</div>
        </div>
        <div class="info_li">
          <div class="info_li_label">单位及职位：</div>
          <div class="info_li_val">{{ userInfo.orgName || emptyText }} {{ userInfo.post }}</div>
        </div>
        <div class="info_li">
          <div class="info_li_label">学历：</div>
          <div class="info_li_val">{{ userInfo.education || emptyText }}</div>
        </div>
        <div class="info_li">
          <div class="info_li_label">政治面貌：</div>
          <div class="info_li_val">{{ userInfo.politics || emptyText }}</div>
        </div>
        <div class="info_li">
          <div class="info_li_label">身份：</div>
          <div class="info_li_val">{{ userInfo.userIdentity || emptyText }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ContrastHead',
  components: {},
  props: {
    userInfo: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      emptyText: '暂无',
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
  padding: 15px;

  .head_img {
    height: 120px;
    width: 100px;

    img {
      width: 100%;
      // height: 100%;
    }

    .icon {
      width: 120px;
      height: 100px;
      font-size: 100px;
    }
  }

  .info {
    flex: 1;
    padding: 0 20px;

    .name {
      font-weight: bold;
      color: #333;
      font-size: 24px;
    }

    .info_con {
      display: flex;
      flex-wrap: wrap;
      padding-top: 10px;
      font-size: 14px;

      .info_li {
        min-width: 70%;
        display: flex;
        align-items: center;
        padding-right: 10px;
        line-height: 30px;
        white-space: nowrap;

        &:nth-of-type(2n) {
          min-width: 30%;
        }

        &_label {
          color: #666;
        }

        &_val {
          color: #333;
        }
      }
    }
  }
}
</style>
